<template>
    <div>
        <div style="float: left">
            <el-button type="danger">第{{xuhao}}章</el-button>
        </div>
        <div style="width: 100%">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        type="index"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="题目"
                        width="200px"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.checkStatus!=2" v-text="scope.row.title"></span>
                        <input v-if="scope.row.checkStatus==2" v-model="scope.row.title" placeholder="请输入课时名称" style="height: 30px;padding-left: 10px"></input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ifFree"
                        label="是否免费"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isFree==false&&scope.row.checkStatus!=2" style="color: red">收费</span>
                        <span v-if="scope.row.isFree==true&&scope.row.checkStatus!=2" style="color: green">免费</span>
                        <el-checkbox v-if="scope.row.checkStatus==2" v-model="scope.row.isFree"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="videoSourceUrl"
                        label="视频"
                        align="center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.checkStatus!=2" type="mini" @click="shipin(scope.row)">视频管理</el-button>
                        <span v-if="scope.row.checkStatus==2">-</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="videoOriginalName"
                        label="课件"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.checkStatus!=2&&scope.row.videoOriginalName!=''">{{scope.row.videoOriginalName}}</span>
                        <span v-if="scope.row.checkStatus!=2&&scope.row.videoOriginalName==''" style="color: green">暂无附件</span>
                        <el-upload
                                type="mini"
                                v-if="scope.row.checkStatus==2"
                                class="upload-demo"
                                :headers="token"
                                action="http://localhost:9000/core/teacher/upload"
                                :on-preview="handlePreview"
                                :on-remove="(file,fileList)=>{handleRemove(file,fileList,scope.row)}"
                                :on-success="(response,file,fileList)=>{onSuccess(response,file,fileList,scope.row)}"
                                :limit="1">
                            <el-button size="small" type="primary">选择文件</el-button>
                        </el-upload>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status=='Empty'&&scope.row.checkStatus!=2" style="color: #107ec4">待审核</span>
                        <span v-if="scope.row.status=='Normal'&&scope.row.checkStatus!=2" style="color: greenyellow">已审核</span>
                        <span v-if="scope.row.checkStatus==2">-</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button type="danger" v-if="scope.row.checkStatus==2" @click="addVideo(scope.row)">保存</el-button>
                        <el-button type="text" v-if="scope.row.checkStatus!==2" size="small" @click="scope.row.checkStatus=2">修改</el-button><br>
                        <el-button type="text" v-if="scope.row.checkStatus!==2" size="small" @click="deleteVideo(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    title="视频上传"
                    :visible.sync="dialogVisible"
                    width="50%">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:9000/core/teacher/upload"
                        :headers="token"
                        :show-file-list="false"
                        :on-success="handleVideoSuccess"
                        :before-upload="beforeUploadVideo"
                >
                    <video width="500px" height="600px" v-if="videoForm.videoSourceUrl1!=''&&videoForm.videoSourceUrl1!=null" :src="videoForm.videoSourceUrl1" class="avatar video-avatar" controls="controls"></video>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <p v-if='load'> 上传中</p>
                    <div>
                        <el-button type="success" size="mini">点击上传</el-button>
                    </div>

                </el-upload>
                <span slot="footer" class="dialog-footer"></span>
                <el-button @click="queren">确认</el-button>
                <el-button @click="quxiao">取消</el-button>
            </el-dialog>
        </div>
        <div>
            <el-button type="danger" @click="fanhui" round>完成返回</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "eduVideo",
        data(){
            return{
                courseId:null,
                xuhao:null,
                isShowUploadVideo:false,
                //视频上传数据
                videoForm:{
                    videoSourceUrl1:'',
                    videoId:null,
                    duration:null
                },
                videoSourceUrl1:'',
                videoId:null,
                load:false,
                dialogVisible:false,
                chapterId:null,
                token:{token:sessionStorage.getItem("token")},
                tableData:[
                    {
                        id:null,
                        title:'',
                        isFree:false,
                        videoSourceUrl:'',
                        videoOriginalName:'',
                        status:'Empty',
                        checkStatus:2
                    }
                ],
            }
        },
        created() {
            this.chapterId=this.$route.params.id;
            this.xuhao=this.$route.params.xuhao;
            this.courseId=this.$route.params.courseid;
            this.init();
        },
        methods:{
            //视频上传提交
            queren(){
                var that=this;
                this.$http.post(`core/video/uploadVideo`,this.videoForm).then(function (resp) {
                    if (resp.data.code===2000){
                        that.$message.success(resp.data.msg);
                    }else {
                        that.$message.error(resp.data.msg);
                    }
                    that.dialogVisible=false;
                    that.init();
                })
            },
            quxiao(){
                this.dialogVisible=false;
            },
            beforeUploadVideo (file) {
                const isLt500M = file.size / 1024 / 1024 < 500;
                if (['video/mp4'].indexOf(file.type) == -1) { //'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'
                    this.$message.error('请上传正确的视频格式');
                    return false;
                }
                if (!isLt500M) {
                    this.$message.error('上传视频大小不能超过500MB哦!');
                    return false;
                }
                this.isShowUploadVideo = false;
                this.load=true;
            },
            //上传成功回调
            handleVideoSuccess (res, file) {
                var that=this;
                this.videoForm.videoSourceUrl1= URL.createObjectURL(file.raw);
                //上传的图片url
                this.videoForm.videoSourceUrl1= res;
                this.load = false;
                //上传的时间
                let audioElement = new Audio(this.videoForm.videoSourceUrl1);
                audioElement.addEventListener("loadedmetadata", function (_event) {
                    that.videoForm.duration = Math.floor(audioElement.duration); //时长为秒，小数，182.36
                    //   this.$parent.$data.wDuration = parseInt(duration)
                });
            },
            init(){
                var that=this;
                this.$http.post(`core/video/findVideoById/${this.chapterId}`).then(function (resp) {
                        that.tableData=resp.data.result;
                        that.tableData.push({
                            id:null,
                            title:'',
                            isFree:false,
                            videoSourceUrl:'',
                            videoOriginalName:'',
                            status:'',
                            checkStatus:2
                        });
                })
            },
            //视频管理按钮
            shipin(row){
                this.dialogVisible=true;
                this.videoForm.videoId=row.id;
                this.videoForm.videoSourceUrl1=row.videoSourceUrl;
            },
            handleRemove(file,fileList,row) {
                row.videoOriginalName="";
            },
            handlePreview(file) {
            },
            onSuccess(response,file,fileList,row){
                row.videoOriginalName=file.name;
            },
            //保存课时
            addVideo(row){
                var that=this;
                if (row.title===""){
                    this.$message.error("请输入章节名称!")
                }else if (row.id==null||row.id==undefined){
                    this.$http.post(`core/video/addVideo/${this.chapterId}/${this.courseId}`,row).then(function (resp) {
                        if (resp.data.code===2000){
                            that.$message.success(resp.data.msg);
                        }else {
                            that.$message.error(resp.data.msg);
                        }
                        that.init();
                    })
                }else {
                    this.$http.post(`core/video/updateVideo`,row).then(function (resp) {
                        if (resp.data.code===2000){
                            that.$message.success(resp.data.msg);
                        }else {
                            that.$message.error(resp.data.msg);
                        }
                        row.checkStatus=0;
                        that.init();
                    })
                }

            },
            deleteVideo(id){
                var that=this;
                this.$http.post(`core/video/deleteVideo/${id}`).then(function (resp) {
                    if (resp.data.code==2000){
                        that.$message.success(resp.data.msg);
                    }else {
                        that.$message.error(resp.data.msg);
                    }
                    that.init();
                })
            },
            fanhui(){
                this.$router.push({
                    name:'chapter',
                    params:{
                        courseid:this.courseId
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>